<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>生成单元和楼层</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
	content="Blue Moon - Responsive Admin Dashboard" />
<meta name="keywords"
	content="Notifications, Admin, Dashboard, Bootstrap3, Sass, transform, CSS3, HTML5, Web design, UI Design, Responsive Dashboard, Responsive Admin, Admin Theme, Best Admin UI, Bootstrap Theme, Wrapbootstrap, Bootstrap, bootstrap.gallery" />
<meta name="author" content="Bootstrap Gallery" />
<link rel="shortcut icon" href="img/favicon.ico">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/new2.css" rel="stylesheet">

<link href="css/new3.css" rel="stylesheet">
<!-- Important. For Theming change primary-color variable in main.css  -->

<link href="fonts/font-awesome.min.css" rel="stylesheet">

<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--CSACASDAAAAAAAAAAA-->

<script src="layer/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<link href="layer/bootstrap.css">

<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<form class="form-horizontal" id="addfloorandunit">
		<div id="first" class="dashboard-container">
			<!-- Row Start -->
			<div class="widget-body">
				<div class="container">
					<div class="align-center">

						<div class="col-xs-12">
							<div class="form-group form-group-sm">
								<label class="col-xs-2 control-label">楼栋名称</label>
								<div class="col-xs-9">
									<input class="form-control input-sm" type="text"
										th:value="${banName}"> <input id="banId" type="hidden"
										name="banId" th:value="${banId}">
								</div>
							</div>
						</div>
						<div class="col-xs-12">
							<div class="form-group form-group-sm">
								<label class="col-xs-2 control-label">楼栋层数</label>
								<div class="col-xs-9">
									<input id="floorNum" name="floorNum"
										class="form-control input-sm" type="text" placeholder="">
								</div>
							</div>
						</div>
						<div class="col-xs-12">
							<div class="form-group form-group-sm">
								<label class="col-xs-2 control-label">单元数目</label>
								<div class="col-xs-9">
									<input id="unitNum" name="unitNum"
										class="form-control input-sm" type="text">
								</div>
							</div>
						</div>
						<div style="padding-right: 100px; float: right">
							<button id="parentIframe" type="button" class="btn btn-info"
								style="width: 90px">下一步</button>
							<button type="button" class="btn btn-info" style="width: 90px"
								onclick="window.close();">返回</button>
						</div>
					</div>
				</div>
			</div>
		</div>

<!-- ---------------------------------------------------------------------------  -->
		<div id="second" class="dashboard-container" style="display: none;">
			<!-- Row Start -->
			<div class="col-lg-12 col-md-12">
				<div class="widget-body">
					<div class="container">
					
						<div id="main" class="align-center second">
							<!--11111111111111111111111-->
							<div class="row">
								<div class="col-xs-6">
									<div class="form-group form-group-sm">
										<label class="col-xs-3 control-label">房间户型</label>
										<div class="col-xs-9">
											<select name="roomHousetypeid" class="info form-control input-sm">
												<option value="">请选择</option>
												<option th:each="houseType : ${houseTypeList}"
													th:value="${houseType.houId}"
													th:text="${houseType.houName}">加载中...</option>
											</select>
										</div>
									</div>
								</div>
							</div>

							<!--2222222222222222222222-->
							<div class="row">
								<div class="col-xs-6">
									<div class="form-group form-group-sm">
										<label class="col-xs-3 control-label"><span>房间结构</span></label>
										<div class="col-xs-9">
											<input name="roomStructure" class="info form-control input-sm"
												type="text">
										</div>
									</div>
								</div>
								<div class="col-xs-6">
									<div class="form-group form-group-sm">
										<label class="col-xs-3 control-label">建筑面积</label>
										<div class="col-xs-9">
											<input name="roomCoveredArea" class="info form-control input-sm"
												type="text">
										</div>
									</div>
								</div>
							</div>

							<!--333333333333-->
							<div class="row">
								<div class="col-xs-6">
									<div class="form-group form-group-sm">
										<label class="col-xs-3 control-label"><span>套内面积</span></label>
										<div class="col-xs-9">
											<input name="roomInnerArea" class="info form-control input-sm"
												type="text">
										</div>
									</div>
								</div>
								<div class="col-xs-6">
									<div class="form-group form-group-sm">
										<label class="col-xs-3 control-label">面积状态</label>
										<div class="col-xs-9">
											<input name="roomAreastate" class="info form-control input-sm"
												type="text">
										</div>
									</div>
								</div>
							</div>
							<hr/>
						</div>
						<div id="follow" >
							
						</div>
						
						<div style="padding: 5px; float: right">
							<button id="done" type="button" class="btn btn-info" style="width: 90px">完成</button>
							<button id="back" type="button" class="btn btn-info" style="width: 90px">上一步</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
	<!-- Main Container end -->

	<script src="js/wysi/wysihtml5-0.3.0.min.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/wysi/bootstrap3-wysihtml5.js"></script>
	<script src="js/jquery.scrollUp.js"></script>

	<!-- Color Picker -->
	<script src="js/color-picker/jquery.minicolors.js"></script>

	<!-- Custom JS -->
	<script src="js/menu.js"></script>
	
	<script type="text/javascript">
	
		var unitnum;
		$('#parentIframe').on('click', function() {
			debugger;
			unitnum = $("#unitNum").val();//单元数
			$("#first").hide();//隐藏第一步
			$("#second").show();//显示第二步
			
			for (var i = 1; i < unitnum; i++) {//循环追加div
				var copydiv=$('#main').clone();
				$('#follow').append(copydiv);
			}
		});//下一步点击事件

		$('#back').on('click', function() {
			debugger;
			$("#first").show();
			$("#second").hide();
		});//上一步点击事件

		
		//完成点击事件
		$('#done').on('click',function() {
			var roomlist = [];
			$(".second").each(function(i,item){
				debugger;
				var demo={};//对象
				var roomHousetypeid = $(item).find("select[name='roomHousetypeid']").val().trim();
				var roomStructure = $(item).find("input[name='roomStructure']").val().trim();
				var roomCoveredArea = $(item).find("input[name='roomCoveredArea']").val().trim();
				var roomInnerArea =$(item).find("input[name='roomInnerArea']").val().trim();
				var roomAreastate = $(item).find("input[name='roomAreastate']").val().trim();
				var unitNum = document.getElementById("unitNum").value;
				var floorNum = document.getElementById("floorNum").value;
				var banId = document.getElementById("banId").value;
				demo={roomHousetypeid:roomHousetypeid,
						roomStructure:roomStructure,
						roomCoveredArea:roomCoveredArea,
						roomInnerArea:roomInnerArea,
						roomAreastate:roomAreastate,
						unitNum:unitNum,
						floorNum:floorNum,
						banId:banId};
				roomlist.push(demo);
			})
			
				
			$.ajax({
				traditional: "true",
				type : "post", 
				url : "/madeFloorAndUnit",
				data : JSON.stringify(roomlist),
				contentType : false,
				dataType : "json",
				success : function(data) {
					debugger;
					if (data.result == "succeed") {
						alert("添加成功！");
						layer.close(layer.index);  
	 			        window.parent.location.reload();
					} else if (data.result == "error") {
						alert("添加失败！");
					} else {
						alert("出现错误！");
					}
				}//回调函数   
			});//ajax
		});
	</script>

	<script type="text/javascript">
		//ScrollUp
		$(function() {
			$.scrollUp({
				scrollName : 'scrollUp', // Element ID
				topDistance : '300', // Distance from top before showing element (px)
				topSpeed : 300, // Speed back to top (ms)
				animation : 'fade', // Fade, slide, none
				animationInSpeed : 400, // Animation in speed (ms)
				animationOutSpeed : 400, // Animation out speed (ms)
				scrollText : 'Top', // Text for element
				activeOverlay : false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
			});
		});

		//Tooltip
		$('a').tooltip('hide');

		//Popover
		$('.popover-pop').popover('hide');

		//Dropdown
		$('.dropdown-toggle').dropdown();
	</script>

</body>
</html>